<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.5/pixi.min.js"></script>
    <script>
        let cat, state;
        let TextureCache = PIXI.utils.TextureCache,
            loader = PIXI.loader,
            Sprite = PIXI.Sprite,
            resources = PIXI.loader.resources,
            Application = PIXI.Application,
            Graphics = PIXI.Graphics;

        let app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight })

        console.log(app)
        document.body.appendChild(app.view)
        let rectangle = new Graphics();
        rectangle.lineStyle(4, 0xFF3300, 1);
        rectangle.beginFill(0x66CCFF);
        rectangle.drawRect(0, 0, 64, 64);
        rectangle.endFill();
        rectangle.x = 170;
        rectangle.y = 170;
        app.stage.addChild(rectangle);

        let circle = new Graphics();
        circle.beginFill(0x9966FF);
        circle.drawCircle(0, 0, 32);
        circle.endFill();
        circle.x = 64;
        circle.y = 130;
        app.stage.addChild(circle);

        let ellipse = new Graphics();
        ellipse.beginFill(0xFFFF00);
        ellipse.drawEllipse(0, 0, 50, 20);
        ellipse.endFill();
        ellipse.x = 180;
        ellipse.y = 130;
        app.stage.addChild(ellipse);


        let roundBox = new Graphics();
        roundBox.lineStyle(4, 0x99CCFF, 1);
        roundBox.beginFill(0xFF9933);
        roundBox.drawRoundedRect(0, 0, 84, 36, 10)
        roundBox.endFill();
        roundBox.x = 48;
        roundBox.y = 190;
        app.stage.addChild(roundBox);

        let triangle = new Graphics();
        triangle.beginFill(0x66FF33);

        //Use `drawPolygon` to define the triangle as
        //a path array of x/y positions

        triangle.drawPolygon([
            -32, 64,             //First point
            32, 64,              //Second point
            0, 0                 //Third point
        ]);

        //Fill shape's color
        triangle.endFill();

        //Position the triangle after you've drawn it.
        //The triangle's x/y position is anchored to its first point in the path
        triangle.x = 180;
        triangle.y = 22;

        app.stage.addChild(triangle);
    </script>
</body>
</html>